import {Component} from 'react'
import Taro from '@tarojs/taro'

import './index.sass'
import {Tabbar} from "@nutui/nutui-react-taro";
import {tabBarItems} from "./config";


export default class Index extends Component {
    state = {
        selected: 0,
        list: tabBarItems
    }

    switchTab(index) {
        this.setSelected(index)
        const url = this.state.list[index].pagePath
        Taro.switchTab({url})
    }

    setSelected(idx: number) {
        this.setState({
            selected: idx
        })
    }

    render() {
        const {list, selected,} = this.state

        return (
            <Tabbar className='tab-bar' onSwitch={value => {
                this.switchTab(value)
            }} value={selected}>
                {list.map((item, index) => {
                    return (
                        <Tabbar.Item key={index} title={item.text} icon={item.icon}/>
                    )
                })}
            </Tabbar>
        )
    }
}